<template>
    <section id="case-detail-page">
     <sub-title subname="病例详情"></sub-title>
     <section class="base-msg">
      <article class="wrap-box wui-border-tb case-msg">
         <w-field  v-model="filterWriteTime" label-width="30" icon-width="100" height="40"  class="inp-row" readonly>
            <w-row slot="label">
                <w-cell>
                   <i class='case-date-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field  v-model="caseDetail.ZyNo"  label-width="30" icon-width="100" height="40"  placeholder="住院号" class="inp-row" readonly>
            <w-row slot="label">
                <w-cell>
                   <i class='case-no-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="DepNo" v-model="caseDetail.DepNo" label-width="30" icon-width="100" height="40"  placeholder="科室" class="inp-row" readonly>
            <w-row slot="label">
                <w-cell>
                   <i class='case-dep-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field  name="CNo" v-model="caseDetail.CNo" label-width="30" icon-width="100" height="40"  placeholder="床号" class="inp-row" readonly>
            <w-row slot="label">
                <w-cell>
                   <i class='case-bedno-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="Name" v-model="caseDetail.Name" label-width="30" icon-width="100" height="40"  placeholder="姓名" class="inp-row" readonly>
            <w-row slot="label">
                <w-cell>
                   <i class='case-name-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="Sex" v-model="caseDetail.Sex" label-width="30" icon-width="100" height="40"  placeholder="性别" class="inp-row" readonly>
            <w-row slot="label">
                <w-cell>
                   <i class='case-sex-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="Age" v-model="caseDetail.Age" label-width="30" icon-width="100" height="40"  placeholder="年龄" class="inp-row" readonly>
            <w-row slot="label">
                <w-cell>
                   <i class='case-age-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="Weight" v-model="caseDetail.Weight" label-width="30" icon-width="100" height="40"  placeholder="体重" class="inp-row" readonly>
            <w-row slot="label">
                <w-cell>
                   <i class='case-weight-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
    </section>
    <h2 style="color: #005ba8;font-weight: bold;padding-left: 1rem;">用药方案</h2>
    <section class="med-msg">
     <w-row class="th">
       <w-cell>阶段</w-cell>
       <w-cell>挥发罐刻度</w-cell>
       <w-cell>氧气流量</w-cell>
       <w-cell>应用时间</w-cell>
     </w-row>
     <w-row class="tr">
       <w-cell class="time">诱导期</w-cell>
       <w-cell class="med-yl">
        <input name="Med_YDQ_1" v-model="caseDetail.Med_YDQ.split('&')[0]" readonly/>
       </w-cell>
       <w-cell class="med-yl">
        <input name="Med_YDQ_2" v-model="caseDetail.Med_YDQ.split('&')[1]" readonly/>
       </w-cell>
       <w-cell class="med-yl">
        <input name="Med_YDQ_3" v-model="caseDetail.Med_YDQ.split('&')[2]" readonly/>
       </w-cell>
     </w-row>
     <w-row class="tr">
       <w-cell class="time">维持期</w-cell>
       <w-cell class="med-yl">
        <input name="Med_WCQ_1" v-model="caseDetail.Med_WCQ.split('&')[0]" readonly/>
       </w-cell>
       <w-cell class="med-yl">
        <input name="Med_WCQ_2" v-model="caseDetail.Med_WCQ.split('&')[1]" readonly/>
       </w-cell>
       <w-cell class="med-yl">
        <input name="Med_WCQ_3" v-model="caseDetail.Med_WCQ.split('&')[2]" readonly/>
       </w-cell>
     </w-row>
     <w-row class="tr">
       <w-cell class="time">苏醒期</w-cell>
       <w-cell class="med-yl">
        <input name="Med_SXQ_1" v-model="caseDetail.Med_SXQ.split('&')[0]" readonly/>
       </w-cell>
       <w-cell class="med-yl">
        <input name="Med_SXQ_2" v-model="caseDetail.Med_SXQ.split('&')[1]" readonly/>
       </w-cell>
       <w-cell class="med-yl">
        <input name="Med_SXQ_3" v-model="caseDetail.Med_SXQ.split('&')[2]" readonly/>
       </w-cell>
     </w-row>
    </section>
    <h2 style="color: #005ba8;font-weight: bold;padding-left: 1rem;">合并用药</h2>
    <section class="commed-msg">
        <w-row class="th">
       <w-cell>阶段</w-cell>
       <w-cell>药品名称</w-cell>
       <w-cell>商品名</w-cell>
       <w-cell>规格</w-cell>
       <w-cell>数量</w-cell>
     </w-row>
     <w-row class="tr">
       <w-cell class="time">诱导期</w-cell>
       <w-cell class="med-yl">
        <input name="MedCom_YDQ_1" v-model="caseDetail.MedCom_YDQ.split('&')[0]" readonly/>
       </w-cell>
       <w-cell class="med-yl">
         <input name="MedCom_YDQ_2" v-model="caseDetail.MedCom_YDQ.split('&')[1]" readonly/>
       </w-cell>
       <w-cell class="med-yl">
          <input name="MedCom_YDQ_3" v-model="caseDetail.MedCom_YDQ.split('&')[2]" readonly/>
       </w-cell>
       <w-cell class="med-yl">
          <input name="MedCom_YDQ_4" v-model="caseDetail.MedCom_YDQ.split('&')[3]" readonly/>
       </w-cell>
     </w-row>
     <w-row class="tr">
       <w-cell class="time">维持期</w-cell>
       <w-cell class="med-yl">
          <input name="MedCom_WCQ_1" v-model="caseDetail.MedCom_WCQ.split('&')[0]" readonly/>
       </w-cell>
       <w-cell class="med-yl">
         <input name="MedCom_WCQ_2" v-model="caseDetail.MedCom_WCQ.split('&')[1]" readonly/>
       </w-cell>
       <w-cell class="med-yl">
         <input name="MedCom_WCQ_3" v-model="caseDetail.MedCom_WCQ.split('&')[2]" readonly/>
       </w-cell>
       <w-cell class="med-yl">
         <input name="MedCom_WCQ_4" v-model="caseDetail.MedCom_WCQ.split('&')[3]" readonly/>
       </w-cell>
     </w-row>
      <w-row class="tr">
       <w-cell class="time">苏醒期</w-cell>
       <w-cell class="med-yl"> 
         <input name="MedCom_SXQ_1" v-model="caseDetail.MedCom_SXQ.split('&')[0]" readonly/> 
       </w-cell>
       <w-cell class="med-yl"> 
         <input name="MedCom_SXQ_2" v-model="caseDetail.MedCom_SXQ.split('&')[1]" readonly/> 
       </w-cell>
        <w-cell class="med-yl"> 
         <input name="MedCom_SXQ_3" v-model="caseDetail.MedCom_SXQ.split('&')[2]" readonly/> 
       </w-cell>
        <w-cell class="med-yl"> 
         <input name="MedCom_SXQ_4" v-model="caseDetail.MedCom_SXQ.split('&')[3]" readonly/> 
       </w-cell>
     </w-row>
    </section>
    <article class="wrap-box wui-border-tb case-msg">
         <w-field name="ActiveHos" v-model="caseDetail.ActiveHos" label-width="30" icon-width="100" height="40"  placeholder="完成医院" class="inp-row" readonly>
            <w-row slot="label">
                <w-cell>
                   <i class='case-hos-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
    </article>
    <article class="wrap-box wui-border-tb case-msg">
         <w-field name="ActiveID" v-model="caseDetail.ActiveID" label-width="30" icon-width="100" height="40"  placeholder="完成人" class="inp-row" readonly>
            <w-row slot="label">
                <w-cell>
                   <i class='case-active-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
    </article>

    <section class="case-menu">
        <case-menu :tag="1"></case-menu>
    </section>
  </section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import caseMenu from '../../components/caseMenu';
import subTitle from '../../components/subTitle';
export default {
    data() {
        return {
            iconWidth: 20,
            iconTitleWidth: 30,
            iconAlign: 'center',
            isBlock: true,
            bgColor: "#005ba8",
            plain: false,
            datePlaceHolder: '日期'
        }
    },
    components: {
        caseMenu,
        subTitle
    },
    computed: {
        ...mapGetters({
            caseDetail: 'caseDetail'
        }), 
        filterWriteTime: function () {
            let val = this.caseDetail.WriteTime;
            if (val != null) {
                var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));
                //月份为0-11，所以+1，月份小于10时补个0
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                return date.getFullYear() + "-" + month + "-" + currentDate;
            } 
            return "";
        }
    },
    mounted() {
        this.setLoading(true);
        this.getCaseDetail(this.$router.history.current.params.id).then((res) => {
            this.setLoading(false);
        });
    },
    methods: {
      ...mapActions([
            'getCaseDetail',
            'setLoading'
      ])
    }
    
}
</script>

<style lang="scss" scoped>
   #case-detail-page {
       font-size: 0.5rem !important;
       i {
           width: 0.875rem;
           height: 0.875rem;
       }
       .case-date-icon {
           background: url('../../assets/img/case/date.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-no-icon {
           background: url('../../assets/img/case/no.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-dep-icon {
           background: url('../../assets/img/case/dep.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-bedno-icon {
            background: url('../../assets/img/case/bedno.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-name-icon {
            background: url('../../assets/img/case/name.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-sex-icon {
            background: url('../../assets/img/case/sex.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-age-icon {
            background: url('../../assets/img/case/age.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-weight-icon {
            background: url('../../assets/img/case/weight.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-hos-icon {
            background: url('../../assets/img/case/hos.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-active-icon {
            background: url('../../assets/img/case/active.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-msg {
           width: 90%;
           margin: 0 auto;
           padding: 0.3rem 0;
       }
       .med-msg,.commed-msg {
           width: 90%;
           margin: 0 auto;
           .wui-al-lm {
               justify-content: center !important;
           }
           .th {
               background: #005ba8;
               color: #fff;
               height: 1.5rem;
               div {
                   border-right: 1px solid #fff;
               }
           }
           .tr {
               height: 1.8rem;
               .time {
                   border-bottom: 1px solid #f2f2f2;
                //    background: #f2f2f2;
               }
               div {
                   border-right: 1px solid #f2f2f2;
                   border-bottom: 1px solid #f2f2f2;
               }
           }
       }
       .med-yl {
           input {
               width: 100%;
            //    height: 80%;
               border: 0;
           }
       }
       .case-menu {
           padding-top: 6rem;
       }
   }
</style>